<template>
  <div class="bgc"><!--滚动条在这里-->
    <div class="zoom" :style="{width:canvas.base.width*canvasSize/100+500+'px',height:canvas.base.height*canvasSize/100+500+'px'}"><!--缩放过程中大小不对的bug-->
      <div class="canvas"
           :style="{width:canvas.base.width+'px',height:canvas.base.height+'px',background:canvas.base.background,backgroundImage:'url(\''+canvas.base.backgroundImage+'\')',transform:'scale('+canvasSize/100+')',transformOrigin:canvas.base.width*canvasSize/200+100+'px ' + canvas.base.height*canvasSize/200+'px'}">
        <!--背景图-->
        <VueDragResize :w="item.width" :h="item.height" :x="item.left" :y="item.top" :z="item.z"
                       v-on:resizing="resize"
                       v-on:dragging="resize"
                       :parentLimitation="true"
                       v-for="(item,i) in canvas.data"
                       :key="item.uuid"
                       @clicked="onActivated(item,i)"
                       @resizestop="onResizstop"
                       :parentScaleX="canvasSize/100"
                       :parentScaleY="canvasSize/100"
                       :minh="1"
                       :minw="1"
                       :isActive="item.showDownUp"
                       :preventActiveBehavior="true">
          <span @click="item.z++" v-if="item.showDownUp" class="down">上</span>
          <span @click="item.z--" v-if="item.showDownUp" class="up">下</span>
          <component :is="item.name" :config="item.config" :data="data" :uuid="item.uuid"></component>
        </VueDragResize>
      </div>
    </div>

  </div>
</template>1

<script>
/**
 * 工作画布
 */
import VueDragResize from 'vue-drag-resize';
import {Canvas} from "@/entity/Canvas";

export default {
  name: "WorkCanvas",
  props: ['canvasSize'],
  data() {
    var canvas = new Canvas();
    return {
      choseComponentIndex: undefined,
      data: 0,
      choseConfig: undefined,
      canvas: canvas.getCanvasInfo()
    }
  },
  components: {VueDragResize},
  methods: {
    onResizstop: function () {
      this.data++;
    },
    resize(newRect) {
      this.canvas.data[this.choseComponentIndex].width = newRect.width;
      this.canvas.data[this.choseComponentIndex].height = newRect.height;
      this.canvas.data[this.choseComponentIndex].top = newRect.top;
      this.canvas.data[this.choseComponentIndex].left = newRect.left;
    },
    onActivated: function (item, i) {
      for (var el of this.canvas.data) {
        el.showDownUp = false;
      }
      item.showDownUp = true;
      this.choseComponentIndex = i;
      this.choseConfig = item;
      this.$emit("choseComponent", item)
    },
    dataChange() {
      this.data++;
    }
  },
  mounted() {

  },
  watch: {
    canvas: {
      handler(newVal, oldVal) {
        this.$emit('input', newVal);
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
.bgc {
  position: relative;
  overflow: scroll;
  background-image: linear-gradient(transparent, transparent 50%, #b5b5b54d 50%), linear-gradient(to right, transparent, transparent 50%, #eaeaea4d 50%);
  background-size: 40px 40px;
  z-index: 9999;
  height: calc(100% - 24px);
  width: 100%;
  padding: 100px;

  .zoom {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

.canvas {
  border: 1px solid rgb(240, 240, 240);
  margin: auto;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;

}

.down {
  position: absolute;
  top: -30px;
  left: -20px;

}

.up {
  position: absolute;
  top: -30px;

}
</style>
